<template>
    <div>
        <!-- 主评论是一个子组件, 每个主评论子组件都渲染一条评论
        遍历评论数组, 形成列表-->
        <CommentMain 
            :commentData="comment" 
            v-for="(comment, index) in commentList" 
            :key="index" 
        />
    </div>
</template>

<script>
    import CommentMain from "@/components/Comment/Main";
    export default {
        components: {
            CommentMain,
        },
        data() {
            return {
                // 假如这个测试页面就是一片文章详情
                // 根据文章 id 可以获取一个评论列表
                // 评论列表是一个数组
                // 里面每个元素都是一个评论对象, 内容叫 content
                commentList: [],
            };
        },
        created() {
            // 创建页面, 接入文章评论数据
            this.$axios({
                url: '/post_comment/1'
            }).then(res=>{
                console.log(res.data);
                this.commentList = res.data.data
            })
        }
    };
</script>

<style>
</style>